${require('./_head.html') title="Themes" description="Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark')." canonical="themes.html" } ${require('./_nav.html')}
${require('./_sidebar.html') active="themes-link"}

Themes

Pico is shipped with 2 consistent themes: Light & Dark.

The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled prefers-color-scheme: dark

Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">

Light theme

<article data-theme="light">
  …
</article>

Dark theme

${require('./_footer.html')}